{extend name="./app/admin/view/main.html" /}
{block name="title"}全部短内容 - {/block}

{block name="style"}
<style>
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">短内容</h4> <h5 class="sub-title">全部短内容</h5>
    </div>
    <div class="float-right">
        <a href="{$mipInfo.domain}/{$Think.config.admin}/tinyinfo/tinyinfoPublish/code-{$tinyinfo_code}" class="ivu-btn ivu-btn-primary ivu-btn-circle">
            <Icon type="edit"></Icon> 发布新图片资源
        </a>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    {include file="./app/tinyinfo/view/admin/incTinyinfoCodes.html"/}
    <section class="content-box">
        <section class="mip-box">
            <section class="mip-box-body">
                <!--内容列表-->
                <section class="diy-table-list" v-cloak>
                    <div class="content-list-header clearfix">
                        <div class="float-left m-b-xs">
                            <i-input v-model="searchData" placeholder="请输入搜索的关键词" style='width: 300px;'>
                                <i-Button slot="append" icon="ios-search" @click='clkSearch'></i-Button>
                            </i-input>
                        </div>
                        
                    </div>


                    <table class="table table-hover diy-table-list">
                        <thead>
                        <tr class="diy-table-item-header">
                            <th><span>短内容Code</span></th>
                            <th><span>标题</span></th>
                            <th><span>图片</span></th>
                            <th>排序</th><th>状态</th>
                            <th>访问次数</th>
                            <th><span>操作</span></th>

                        </tr>
                        </thead>

                        <tbody class="diy-table-body">

                            <template v-if='tinyinfoList.length'  v-for='(tinyinfo,index ) in tinyinfoList' >
                                <tr class="tr1 diy-table-item">
                                    <td> {{tinyinfo.tinyinfo_code}}</td>
                                    <td v-html="tinyinfo.title"></td>
                                    <td>
                                        <div style="display: inline-block;line-height: 0px;width: 300px;height: 90px;padding: 3px;">
                                        <img v-if="tinyinfo.img_url && tinyinfo.img_url!='' " :src="tinyinfo.img_url" style="width:100%;height:100%;object-fit: cover"> </div></td>
                                    <td>
                                        <i-button type="text" size="small" @click='moveUp(tinyinfo)' :disabled='index==0'>
                                            <Icon type="md-arrow-round-up" />
                                        </i-button>
                                        <i-button type="text" size="small" @click='moveDown(tinyinfo)' :disabled='tinyinfoList.length==index+1'>
                                            <Icon type="md-arrow-round-down" />
                                        </i-button>
                                    </td>
                                    <td><span v-if='tinyinfo.status==1' class="tbl-icon">启用</span><span v-else class="tbl-icon">禁用</span></td>
                                    <td> {{tinyinfo.strVisitNumb}} </td>
                                    <td>
                                        <Button-Group size="small" shape="circle">
                                            <i-button type="success" @click="tinyinfoEdit(tinyinfo)"  type="primary">编辑</i-button>
                                            <i-button type="warning" @click="tinyinfoDel(tinyinfo)" >删除</i-button>
                                        </Button-Group>
                                    </td>

                                </tr>
                            </template>

                            <template v-if="tinyinfoList.length==0">
                                <tr>
                                    <td colspan="6" class="no-block">
                                        <Icon type="ios-filing-outline"></Icon>
                                        <p>暂无数据</p>
                                    </td>
                                </tr>
                            </template>

                        </tbody>
                    </table>
                </section>
                <!--内容列表结束-->
                <!--分页-->
                <div class="text-right clearfix mt-3">
                    <Page :total="pagination.total"  @on-page-size-change='tinyinfoPaginationSelect' :page-size-opts='[10,100,500,1000,5000]'
                          show-total show-sizer placement='top' @on-change='tinyinfoPaginationClick'></Page>
                </div>
            </section>
        </section>
    </section>
</main>

{/block}
    
{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            searchData: '',
            tinyinfo_code: '{$tinyinfo_code}',
            tinyinfoList: [ ],
            statusText: '全部',
            pagination: {
                currentPage: 1,
                limit: 10,
                total: this.total,
            },
        },
        watch: {
        },
        mounted() {
            this.getTinyinfoList();
        },
        methods: {
            tinyinfoEdit(item) {
                window.location.href = '{$mipInfo.domain}/{$Think.config.admin}/tinyinfo/tinyinfoPublish/id-' + item.id ;
            },
            tinyinfoDel(val) {
                var _this = this;
               this.$Modal.confirm({
                    title: '消息提示',
                    content: '<p>确定删除么？删除后不可恢复</p>',
                    onOk: () => {
                        _this = this;
                        this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfo/do_del', {
                            id: val.id,
                        }).then(function(res) {
                            if(res.code == 1) {
                                _this.$Message.success('操作成功');
                                _this.getTinyinfoList();
                            }
                        });
                    },
                    onCancel: () => {
                    }
                });
            },
            getTinyinfoList() {
                this.loading = true;
                var _this = this;
              
                this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfo/get_list', {
                    page: this.pagination.currentPage,
                    limit: this.pagination.limit,
                    tinyinfo_code: this.tinyinfo_code,
                }).then(function(res) {
                    _this.itemList = [];
                    if(res.code == 1) {
                        var itemList = res.data.list;
                        if (itemList) {
                            _this.tinyinfoList = itemList;
                        }
                        _this.pagination.total = res.data.count;
                    }
                    _this.loading = false;
                });
            },
            tinyinfoPaginationSelect(val) {
                this.pagination.limit = val;
                this.getTinyinfoList();
            },
            tinyinfoPaginationClick(val) {
                this.pagination.currentPage = val;
                this.getTinyinfoList();
            },
            //搜索
            clkSearch: function() {
                this.getTinyinfoList();
            },
            moveUp(item) {

                var tinyinfoList = this.tinyinfoList;
                for (var i = 0; i < tinyinfoList.length; i++) {
                    tinyinfoList[i].sort = i;
                }

                for (var i = 0; i < tinyinfoList.length; i++) {
                    if (item.id == tinyinfoList[i].id) {
                        tinyinfoList[i - 1].sort = i;
                        tinyinfoList[i].sort = i - 1;
                    }
                }
              
                this.tinyinfoList = tinyinfoList;
                this.sortSave();
            },
            moveDown(item) {
                var tinyinfoList = this.tinyinfoList;
                for (var i = 0; i < tinyinfoList.length; i++) {
                    tinyinfoList[i].sort = i;
                }
                for (var i = 0; i < tinyinfoList.length; i++) {
                    if (item.id == tinyinfoList[i].id) {
                        tinyinfoList[i + 1].sort = i;
                        tinyinfoList[i].sort = i + 1;
                    }
                }
             
                this.tinyinfoList = tinyinfoList;
                this.sortSave();
            },
            sortSave() {
                var itemList = this.tinyinfoList;
                this.$mip.ajax('{$mipInfo.domain}/tinyinfo/ApiAdminTinyinfo/do_sort_save', {
                    itemList: itemList,
                }).then(res => {
                    if (res.code == 1) {
                        this.$Message.success('操作成功');
                        this.getTinyinfoList();
                    }
                });
            },
        }
    })
  </script>
{/block}